<template>
  <view>
    <view style="position: absolute;left: 50rpx;top: 100rpx;z-index: 9999;">
      <u-icon name="arrow-left" color="#fff" size="50" @click="$u.route({type: 'back', delta: 1})"></u-icon>
    </view>

    <view class="contents relative" v-if="!base64" @longpress="open" id="poster">
      <image src="/static/images/huangjin/bg.png" mode="widthFix" style="width: 100%;" id="back" />

      <!-- <view v-if="!img_url" class="bottom_btn u-f-ajc" @click="submit">点击生成推广码</view> -->
      <view class="msgs" v-if="img_url">长按保存图片~</view>

      <view class="abso_box u-f-ajc u-f-column">
        <view class="qrcode" :style="{width:size+'px', height: size+'px'}">
          <image :src="appImg" mode="" v-if="appImg"></image>
          <uqrcode ref="uqrcode" v-else></uqrcode>
        </view>
        <view class="yqm">邀请码：{{yqm}}</view>
      </view>

    </view>


    <view v-if="base64">
      <image :src="base64" mode="widthFix" style="width: 100%;"></image>
    </view>
  </view>
</template>

<script>
  import html2canvas from 'html2canvas'
  import * as API_Haibao from '@/api/haibao.js';
  export default {
    data() {
      return {
        img_url: '',
        base64: '',

        size: 200,
        yqm: '',
        // yqm: 'E7n3tv7AoAE=',
        appImg: '',
      };
    },
    onReady() {
      this.H5shengcheng()
    },
    methods: {
      async H5shengcheng() {
        let res2 = uni.getSystemInfoSync()
        // console.log(res2.windowWidth, res2.windowHeight)
        // this.size = parseInt(res2.windowWidth / 2.25)

        this.img_url = await API_Haibao.getShareurl()
        this.yqm = this.img_url.substring(this.img_url.indexOf('refererCode=') + 12, this.img_url.indexOf('&') - 1)
        setTimeout(() => {
          // this.$refs.qrcode._makeCode();
          this.$refs
            .uqrcode
            .make({
              mode: 'canvas', // 默认为view
              size: this.size,
              text: this.img_url
            })
            .then(res => {
              console.log(res)
              // #ifdef  APP-PLUS
              this.appImg = res.tempFilePath
              // #endif
            })
        }, 100)
        // #ifdef  H5
        setTimeout(() => {
          this.h5capture()
        }, 1000)
        // #endif
      },
      qrR(e) {
        console.log(e)
      },
      open() {
        // #ifdef  APP-PLUS
        this.appCapture()
        // #endif
      },
      h5capture() {
        // 使页面滑到顶部，避免顶部出现白边
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
        var dom = document.querySelector('#poster'); // 获取dom元素
        html2canvas(dom, {
          width: dom.clientWidth, //dom 原始宽度
          height: dom.clientHeight,
          scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
          scrollX: 0,
          useCORS: true, //支持跨域，但好像没什么用
        }).then((canvas) => {
          // 将生产的canvas转为base64图片
          this.base64 = canvas.toDataURL('image/png')
        });
      },
      appCapture() {
        var pages = getCurrentPages();
        var page = pages[pages.length - 1];
        console.log("当前页" + pages.length - 1);
        var bitmap = null;
        var currentWebview = page.$getAppWebview();
        bitmap = new plus.nativeObj.Bitmap('amway_img');
        // 将webview内容绘制到Bitmap对象中  
        currentWebview.draw(bitmap, function() {
          bitmap.save("_doc/" + new Date().getTime() + "a.jpg", {}, function(i) {
            console.log('保存图片成功：' + JSON.stringify(i));
            uni.saveImageToPhotosAlbum({
              filePath: i.target,
              success: function() {
                bitmap.clear(); //销毁Bitmap图片  
                uni.showToast({
                  title: '保存图片成功',
                  mask: false,
                  duration: 1500
                });
              }
            });
          }, function(e) {
            console.log('保存图片失败：' + JSON.stringify(e));
          });
        }, function(e) {
          console.log('截屏绘制图片失败：' + JSON.stringify(e));
        });
        //currentWebview.append(amway_bit);
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F88F3E;
  }

  .contents {
    width: 100%;
    height: 100vh;
  }

  .cards {
    width: 90%;
    height: 50%;
    border-radius: 10rpx;
    position: fixed;
    left: 5%;
    top: 30%;
    padding-top: 20rpx;

  }

  .titles {
    width: 100%;
    font-size: 40rpx;
    color: #FFFFFF;
    margin-bottom: 100rpx;
  }

  .inputs {
    width: 70%;
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 20rpx;
  }

  .bottom_btn {
    width: 70%;
    background-color: #C05678;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 40rpx;
    padding: 14rpx 0;
    border-radius: 50rpx;
    position: fixed;
    bottom: 200rpx;
    left: 15%;
  }

  .abso_box {
    width: 100%;
    position: absolute;
    // top: 39%;
    top: 0;
    margin-top: 550rpx;
  }

  .qrcode {
    image {
      width: 100%;
      height: 100%;
    }
  }

  .msgs {
    width: 100%;
    color: #FFFFFF;
    position: fixed;
    bottom: 100rpx;
    text-align: right;
    right: 30rpx;
    bottom: 50rpx;
  }

  .yqm {
    color: #fff;
    font-size: 40rpx;
    font-weight: 700;
    margin: 50rpx 0 0;
  }
</style>